<template>
  <header :class="className">
    <div class="logo"><h3>尘光</h3></div>
    <ul class="midllen_nav">
      <li>
        <router-link to="/" :class="{ selectColor: flag === 1 }"
          >首页</router-link
        >
      </li>
      <li>
        <router-link to="/about" :class="{ selectColor: flag === 2 }"
          >分类</router-link
        >
      </li>
      <li>
        <router-link to="/tag/" :class="{ selectColor: flag === 3 }"
          >标签</router-link
        >
      </li>
      <li>
        <router-link to="/allfile" :class="{ selectColor: flag === 4 }"
          >归档</router-link
        >
      </li>
      <li>
        <router-link to="/spetopic" :class="{ selectColor: flag === 5 }"
          >专题</router-link
        >
      </li>
      <li>
        <router-link to="/mesboard" :class="{ selectColor: flag === 6 }"
          >留言板</router-link
        >
      </li>
      <li>
        <router-link to="/aboutMe" :class="{ selectColor: flag === 7 }"
          >关于我</router-link
        >
      </li>
      <li>
        <a href="#">
          <el-dropdown>
            <span class="el-dropdown-link">
              项目源码<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <a href="https://gitee.com/zndxn/vue-blog" target="blank"
                  >前端项目源码</a
                >
              </el-dropdown-item>
              <el-dropdown-item>
                <a
                  href="https://gitee.com/zndxn/nodejs-blog-server"
                  target="blank"
                >
                  后端项目源码</a
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown></a
        >
      </li>
    </ul>
    <div class="flt login">
      <el-dropdown>
        <div class="avatar"><img src="../assets/img/avatar.jpg" alt="" /></div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="isshow === true"
            ><div @click="showLogin">登录</div>
          </el-dropdown-item>
          <el-dropdown-item v-if="isshow === false"
            ><div @click="logoutLogin">退出登录</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="top_search">
      <el-input
        placeholder="请输入要搜索的文章"
        v-model="searchValue"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
  </header>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "headerNav",
  props: {
    msg: String,
  },
  watch: {
    $route: function (router) {
      const { name } = router;
      this.flag = this.getFlag(name);
    },
    getshowloginbtn: function (val) {
      this.isshow = val;
    },
  },
  data() {
    return {
      flag: "",
      input1: "",
      input2: "",
      searchValue: "",
      className: "",
      topF: 0,
      isshow: localStorage.getItem("token") ? false : true,
    };
  },
  computed: {
    ...mapGetters("user", ["getShowlogin", "getUser", "getshowloginbtn"]),
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
    const { name } = this.$route;
    this.flag = this.getFlag(name);
  },

  methods: {
    logoutLogin() {
      localStorage.clear();
      this.setuser({});

      this.setshowloginbtn(true);
    },
    ...mapActions("user", ["setshowlogin", "setshowloginbtn", "setuser"]),
    showLogin() {
      this.setshowlogin(true);
    },
    getFlag(name) {
      switch (name) {
        case "home":
          return 1;

        case "about":
          return 2;
        case "tag":
          return 3;

        case "allfile":
          return 4;

        case "spetopic":
          return 5;

        case "mesboard":
          return 6;

        case "aboutMe":
          return 7;

        case "project":
          return 8;
      }
    },
    handleSelect(value) {
      this.flag = value;
    },
    scroll() {
      //获取滚动条离顶部的距离
      var scroll_top =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0;

      if (scroll_top > this.topF) {
        this.className = "class1";
      } else {
        this.className = "";
      }
      this.topF = scroll_top;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login {
  display: flex;
  align-items: center;
  // d
  height: 100%;
  margin-right: 170px;
  .avatar {
    img {
      width: 45px;
      border-radius: 50%;
    }
  }
}

.selectColor {
  color: #80c8f8;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  opacity: 1;
  animation: ant1 0.3s 0.1s ease both;
  background-color: rgb(255, 255, 255, 0.7);
  z-index: 99;
  .logo {
    float: left;
    height: 100%;
    line-height: 65px;
    margin-left: 60px;
  }
  .midllen_nav {
    float: left;
    height: 100%;
    line-height: 55px;
    margin-left: 170px;
    li {
      position: relative;
      float: left;
      margin-right: 30px;
      list-style-type: none;
      padding: 0 5px;
      a {
        display: inline-block;
        padding: 5px 0;
        // color: #333;
        text-decoration: none;
        transition: 0.3 linear;
      }
      &:hover {
        a,
        &::after {
          color: #80c8f8;
          width: 100%;
        }
      }
      &::after {
        content: "";
        position: absolute;
        display: block;
        bottom: 15px;
        left: 0;
        width: 0;
        height: 2px;
        border-radius: 50px;
        background-color: #80c8f8;
        transition: all 0.3s ease;
      }
    }
  }

  .top_search {
    float: right;
    height: 100%;
    line-height: 65px;
    margin-right: 60px;
  }
}
.class1 {
  animation: ant 0.3s 0.1s ease both;
  // background-color: red;
}
.class2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  opacity: 1;
  background-color: rgb(255, 255, 255, 0.7);
  // background-color: red;
}
@keyframes ant {
  0% {
    height: 65px;
    opacity: 1;
  }
  100% {
    height: 0px;
    opacity: 0;
  }
}
@keyframes ant1 {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    opacity: 1;
    height: 65px;
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
